﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=83un3aHKodkIg2SKp99fN19p"></script>
    @*--------------------应用easyUI的CSS文件---------------------*@
    <link href="~/Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <script src="~/Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    @*---------------------应用easyUI的的JS文件-----------------*@
    <title>地图展示</title>

</head>
<body>
   
<div id="allmap"></div>
           
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 600px; padding: 10px 20px"
         closed="true" resizable="true" modal="true" align="center">

        <form id="fm" method="post">

            <table>
                <tr>
                    <th colspan="2">标注路灯</th>
                </tr>
                <tr style="display:none">
                    <td><label for="ID">编号：</label></td>
                    <td><input class="easyui-validatebox" id="ID" name="ID" /></td>
                </tr>

                <tr>
                    <td><label for="LightName">路灯名：</label></td>
                    <td><input class="easyui-validatebox" id="LightName" name="LightName" required="true" /></td>
                </tr>

                <tr>
                    <td><label for="TypeID">路灯类别：</label></td>
                    <td>
                        <input class="easyui-combobox" name="TypeID" id="TypeID"
                               data-options="valueField:'LightTypeID',textField:'LightTypeName',
                            url:'GetLightTypeComboboxList',required:'true'" />
                    </td>
                </tr>


                <tr>
                    <td><label for="CenterLng">经度：</label></td>
                    <td><input class="easyui-validatebox" id="CenterLng" name="CenterLng" required="true" readonly="readonly" /></td>
                </tr>
                <tr>
                    <td><label for="CenterLat">纬度：</label></td>
                    <td><input class="easyui-validatebox" id="CenterLat" name="CenterLat" required="true" readonly="readonly" /></td>
                </tr>

                <tr>
                    <td><label for="Zoom">比列尺：</label></td>
                    <td><input class="easyui-validatebox" id="Zoom" name="Zoom" required="true" /></td>
                </tr>

                <tr>
                    <td><label for="Address">路灯所在地址：</label></td>
                    <td><input class="easyui-validatebox" id="Address" name="Address" required="true" readonly="readonly" /></td>
                </tr>


                <tr>
                    <td><label for="CreateTime">路灯标注时间：</label></td>
                    <td><input class="easyui-datetimebox" id="CreateTime" name="CreateTime" required="true" /></td>
                </tr>



                <tr>
                    <td><label for="Status">路灯状态：</label></td>
                    <td>
                        <select id="Status" class="easyui-combobox" name="Status">

                            <option value=1>正常</option>
                            <option value=2>损坏</option>
                            <option value=3>维修</option>


                        </select>
                    </td>

                </tr>

                <tr>
                    <td><label for="Brand">路灯品牌：</label></td>
                    <td><input class="easyui-validatebox" id="Brand" name="Brand" required="true" /></td>
                </tr>

                <tr>
                    <td><label for="Company">路灯维护厂家：</label></td>
                    <td><input class="easyui-validatebox" id="Company" name="Company" required="true" /></td>
                </tr>

                <tr>
                    <td><label for="Information">路灯相关信息：</label></td>
                    <td><input class="easyui-validatebox" id="Information" name="Information" required="true" /></td>
                </tr>

                <tr @*style="display:none"*@>
                    <td><label for="Province">路灯所在省：</label></td>
                    <td><input class="easyui-validatebox" id="Province" name="Province" required="true" /></td>
                </tr>

                <tr @*style="display:none"*@>
                    <td><label for="City">路灯所在城市：</label></td>
                    <td><input class="easyui-validatebox" id="City" name="City" required="true" /></td>
                </tr>

                <tr @*style="display:none"*@>
                    <td><label for="District">路灯所在区：</label></td>
                    <td><input class="easyui-validatebox" id="District" name="District" required="true" /></td>
                </tr>

                <tr @*style="display:none"*@>
                    <td><label for="Street">路灯所在街道：</label></td>
                    <td><input class="easyui-validatebox" id="Street" name="Street" required="true" /></td>
                </tr>

                <tr @*style="display:none"*@>
                    <td><label for="StreetNumber">路灯所在街道号：</label></td>
                    <td><input class="easyui-validatebox" id="StreetNumber" name="StreetNumber" required="true" /></td>
                </tr>

                <tr>
                    <td><label for="Logo">路灯使用图标：</label></td>
                    <td><input class="easyui-validatebox" id="Logo" name="Logo" required="true" /></td>
                </tr>

                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="save()">确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                           onclick="javascript:$('#dlg').dialog('close'); ">关闭</a>
                    </td>
                </tr>

            </table>
        </form>

    </div>



<div id="dlgEditLightState" class="easyui-dialog" style="width: 300px; height: 200px; padding: 10px 20px"
         closed="true" resizable="true" modal="true" align="center">

        <form id="fmEditStatus" method="post" novalidate="novalidate">

            <input class="easyui-validatebox" id="EditStateID" name="EditStateID" style="display: none;" />

            <table>
              
                <tr>
                    <td><label for="EditStatus">选择路灯状态：</label></td>
                    <td>
                        <select id="EditStatus" class="easyui-combobox" name="EditStatus">
                            <option value=1>正常</option>
                            <option value=2>损坏</option>
                            <option value=3>维修</option>
                        </select>
                    </td>
                <tr>

                <tr >
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveState()">确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                           onclick="javascript: $('#dlgEditLightState').dialog('close'); ">关闭</a>
                    </td>
                </tr>

            </table>
        </form>

    </div>

</body>
</html>
<script type="text/javascript">

    var enableScrollWheelZoom = true;
    var map = null;
    var zoom = 18;
    var mapPoint = null;
    var enableKeyboard = true;
    var enableContinuousZoom = true;
    var enableInertialDragging = true;
    var CommunityList = [];//坐标数据集合
    var MarkerList = [];
    var LightID=0;
    var url;
   

    window.onload = function () {
        try {
            
            //// 百度地图API功能
            mapPoint = new BMap.Point(114.131, 22.649);
            if (map == null)
               map = new BMap.Map("allmap");
              //map = new BMap.Map("allmap", { mapType: BMAP_HYBRID_MAP });
              //map.centerAndZoom(mapPoint, zoom);  // 初始化地图，设置中心点坐标和地图级别

            map.centerAndZoom("杭州", 18); // 初始化地图,用城市名设置地图中心点

            var menu = new BMap.ContextMenu(); //右键菜单
            var txtMenuItem = [  //右键菜单项目
                {
                    text: '放大',
                    callback: function () { map.zoomIn() }
                },
                {
                    text: '缩小',
                    callback: function () { map.zoomOut() }
                },
                {
                    text: '放置到最大级',
                    callback: function () { map.setZoom(18) }
                },
                {
                    text: '查看全国',
                    callback: function () { map.setZoom(4) }
                },
                {
                    text: '添加标注',
                    callback: function (p) {
                        var gc = new BMap.Geocoder();

                            $('#dlg').dialog('open').dialog('setTitle', '标注路灯');
                            $('#fm').form('clear');
                            url = "Regist";
                            var lng = p.lng;
                            var lat = p.lat;
                            $("#CenterLng").val(lng);
                            $("#CenterLat").val(lat);

                            var pt = p;
                            gc.getLocation(pt, function (rs) {
                                var addComp = rs.addressComponents;
                                $("#Province").val(addComp.province);
                                $("#City").val(addComp.city);
                                $("#District").val(addComp.district);
                                $("#Street").val(addComp.street);
                                $("#StreetNumber").val(addComp.streetNumber);
                                $("#Address").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                            });

                      
                       
                    }
                }
            ];


            for (var i = 0; i < txtMenuItem.length; i++) {
                menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); //菜单添加项目
                if (i == 1 || i == 3) {
                    menu.addSeparator();  //添加右键菜单的分割线
                }
            }

            map.addContextMenu(menu);

            if (enableScrollWheelZoom)
                map.enableScrollWheelZoom();  // 开启鼠标滚轮缩放
            if (enableKeyboard)
                map.enableKeyboard();         // 开启键盘控制
            if (enableContinuousZoom)
                map.enableContinuousZoom();   // 开启连续缩放效果
            if (enableInertialDragging)
                map.enableInertialDragging(); // 开启惯性拖拽效果

            map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
            map.addControl(new BMap.OverviewMapControl({ isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT }));      //为地图添加鹰眼
            map.addControl(new BMap.NavigationControl());      //为地图添加鱼骨

            var strUrl = "/Light/SearchLight";
            //默认加载标注数据
            $.getJSON(strUrl, null,
                function (data) {
                    initCommunityList(data);
                    RefreshMarker();
                });

        }
        catch (err) {
            alert("百度地图加载失败,请确保你的电脑能访问百度地图!!");
        }

    }

    function initCommunityList(data) {
        CommunityList.length = 0;
        if ($.trim(data) != "") {
            var strCommunityList = data.split(";");
            $.each(strCommunityList, function (i, item) {
                if ($.trim(item) != "") {
                    var instance = item.split(",");
                    var community = new Object();
                    community.LightName = instance[0];//路灯名
                    community.CenterLng = instance[1];//经度
                    community.CenterLat = instance[2];//纬度
                    community.Zoom = instance[3];     //比列尺
                    community.Adress = instance[4];   //路灯地址
                    community.CreateTime = instance[5];//创建日期
                    if (instance[6] == 1) {
                        community.Status = "正常";
                       
                    }
                    else if (instance[6] == 2) {
                        community.Status = "损坏";
                        
                    }
                    else if (instance[6] == 3) {
                        community.Status = "维修";
                        
                    }
                    else {
                        community.Status = "未知";
                    }
                    
                    community.Brand=instance[7];//路灯品牌
                    community.Company = instance[8];//路灯维护公司
                    community.ID = instance[9];//路灯编号

                    //如果没有坐标，则不加入标注数据
                    if (community.CenterLat != -1000 && community.CenterLng != -1000) {
                        CommunityList[CommunityList.length] = community;
                    }
                }
            });
        }

    }

    //刷新地图标注,以及地图定位
    function RefreshMarker() {
        ClearMarker();
        if (CommunityList.length > 0) {
            for (var index = 0; index < CommunityList.length; index++) {
                var community = CommunityList[index];
                addMarker(community);
            }
            var commuinty = CommunityList[0];
            var firstpoint = new BMap.Point(commuinty.CenterLng, commuinty.CenterLat);
            map.centerAndZoom(firstpoint, Number(community.Zoom));
        } else {
            map.centerAndZoom(mapPoint, zoom);                 // 初始化地图，设置中心点坐标和地图级别
        }
    }

    // 编写自定义函数,创建标注
    function addMarker(commuinity) {
        var marker = _createNormalMarker(commuinity);
        map.addOverlay(marker);
        MarkerList[MarkerList.length] = marker;
    }

    //清除历史标注
    function ClearMarker() {
        if (MarkerList.length > 0) {
            map.clearOverlays();
            for (i in MarkerList) {
                MarkerList[i] = null;
            }
            MarkerList.length = 0;
        }
    }

    //创建详细标注
    function _createNormalMarker(commuinity) {

        var myIcon = new BMap.Icon("http://localhost:1122/images/anchor.png", new BMap.Size(32, 32));
        var point = new BMap.Point(commuinity.CenterLng, commuinity.CenterLat);
        var marker = new BMap.Marker(point, { icon: myIcon });
        marker.addEventListener("click", function (e) {
            //将所选路灯编号赋值给变量LightID
            LightID = commuinity.ID;
            var opts = {
                width: 300,
                height: 400,
                title: "<h3>路灯信息</h3>"
            }
            var infoWindow = null;

           
        var content = "<div><ul>";
        content = content + "<li>路灯编号:" + commuinity.ID + "</li>";
        content = content + "<li>路灯名:" + commuinity.LightName + "</li>";
        content=content+"<li>路灯地址:"+commuinity.Adress+"</li>";
        content=content+"<li>经度:"+commuinity.CenterLng+"</li>";   
        content = content + "<li>纬度:" + commuinity.CenterLat + "</li>";
        content = content + "<li>创建日期:" + commuinity.CreateTime + "</li>";
        content = content + "<li>路灯状态:<span style='color:red'>" + commuinity.Status  + "</span></li>";
        content = content + "<li>路灯品牌:" + commuinity.Brand + "</li>";
        content = content + "<li>路灯维护公司:" + commuinity.Company + "</li>";
        content = content + "<li>" + "<span><a style='font-size:15px' href='javascript:void(0)' onclick='editLightState()'>修改路灯状态</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style='font-size:15px' href='javascript:void(0)' onclick='deleteLight()'>删除路灯</a></span></li>";
        content = content + "<li>" + "<span><a style='font-size:15px' href='javascript:void(0)' onclick='editLightInfo()'>修改路灯信息</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>";
        content = content + "</ul></div>";
        //content = content + "</ul><table><tr style='text-align:center;'><td><a style='font-size:15px' href='javascript:void(0)' onclick='editLightState()'>修改路灯状态</a></td> <td><a href='javascript:void(0)' onclick='deleteLight()'>删除路灯</a> </td> </tr>";
        //content = content + "</table></div>";

        infoWindow = new BMap.InfoWindow(content, opts);
            map.openInfoWindow(infoWindow, e.point);

        });
        marker.tag = commuinity;
        map.addOverlay(marker);

        var label = null;
            
        if (commuinity.Status == "正常")//路灯正常 绿色
        {
            label=new BMap.Label("我是路灯" + commuinity.ID + ": " + commuinity.LightName+";状态:正常", { offset: new BMap.Size(20, -10) });

            label.setStyle({
                //backgroundColor: "green",
                //color: "black",
                color: "green",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
        }
        else if (commuinity.Status == "损坏")//路灯损坏 红色
        {
            label = new BMap.Label("我是路灯" + commuinity.ID + ": " + commuinity.LightName + ";状态:损坏", { offset: new BMap.Size(20, -10) });

            label.setStyle({
                //backgroundColor: "red",
                //color: "black",
                color: "red",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
        }
        else if (commuinity.Status == "维修")//路灯维修 蓝色
        {
            label = new BMap.Label("我是路灯" + commuinity.ID + ": " + commuinity.LightName + ";状态:维修", { offset: new BMap.Size(20, -10) });

            label.setStyle({
                //backgroundColor: "blue",
                //color: "black",
                color: "blue",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
        }
        else if (commuinity.Status == "未知")//状态未知 黑色
        {
            label = new BMap.Label("我是路灯" + commuinity.ID + ": " + commuinity.LightName + ";状态:未知", { offset: new BMap.Size(20, -10) });

            label.setStyle({
                //backgroundColor: "white",
                //color: "black",
                color: "black",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
        }
       
        marker.setLabel(label);
        //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        return marker;
    }
    function deleteLight()
    {
        //发送异步请求删除数据
        $.messager.confirm("删除信息", "您确认删除该路灯的信息吗？", function (r) {
            if (r) {
                $.post("/Light/DeleteLight", { ID: LightID }, function (data) {
                    if (data == "OK") {
                        window.location.reload();//刷新当前页面
                        $.messager.alert("友情提示", "删除成功!");
                        
                       }
                    else {
                        $.messager.alert("友情提示", data);
                    }
                });
            }
        });
        
    }

    function save() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result == "OK") {
                    $('#dlg').dialog('close');
                    window.location.reload();//刷新当前页面
                    $.messager.alert("提示", "操作成功!");
                }
                else {
                    $.messager.alert("提示", result);
                }
            }
        });
    }

    function editLightState() {
        $('#dlgEditLightState').dialog('open').dialog('setTitle', '修改路灯状态');
        $('#EditStateID').val(LightID);
    }

    function editLightInfo() {
        $('#dlg').dialog('open').dialog('setTitle', '修改路灯信息');
        $('#fm').form('clear');
        //url = "UpdateInfo?ID" + LightID;
        url = "UpdateInfo";
        //异步获取采集器信息
        $.getJSON("/Light/BindLightInfo", { ID: LightID }, function (date) {
            $("#ID").val(date.ID);
            $("#LightName").val(date.LightName);
            $("#CenterLng").val(date.CenterLng);
            $("#CenterLat").val(date.CenterLat);
            $("#Zoom").val(date.Zoom);
            $("#Address").val(date.Address);
            $("#CreateTime").val(date.CreateTime);
            //路灯状态
            $("#Status").combobox('select', date.Status);
            $("#Company").val(date.Company);
            $("#Brand").val(date.Brand);
            $("#Information").val(date.Information);
            $("#Province").val(date.Province);
            $("#City").val(date.City);
            $("#District").val(date.District);
            $("#Street").val(date.Street);
            $("#StreetNumber").val(date.StreetNumber);
            $("#Logo").val(date.Logo);
        });
    }
    function saveState() {
        $('#fmEditStatus').form('submit', {
            url: "EditLightlabelState",
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result == "OK") {
                    $('#dlgEditLightState').dialog('close');
                    window.location.reload();//刷新当前页面
                    $.messager.alert("提示", "操作成功!");
                }
                else {
                    $.messager.alert("提示", result);
                }
            }
        });
    }
</script>